<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>附近的人</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="initial-scale=1.0, user-scalable=no" name="viewport">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=hPuA9MGHxpzS3vE5MiZu0y9EAMB0Cg07"></script>
</head>
<body>
<div class="div_top" th:replace="include/top"></div>
<div id="container"></div>
</body>
<script th:inline="javascript" type="text/javascript">
    var myx = /*[[${userPX}]]*/  107.0601849011229;
    var myy = /*[[${userPY}]]*/  33.075758669497986;
    var info = /*[[${info}]]*/  "用户的详细位置";
    var xlist = /*[[${xlist}]]*/  "用户的详细位置";
    var ylist = /*[[${ylist}]]*/  "用户的详细位置";
    var namelist = /*[[${namelist}]]*/  "用户的详细位置";
    var infolist = /*[[${infolist}]]*/  "用户的详细位置";
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(myx, myy), 16);
    map.enableScrollWheelZoom(true);

    // 创建点标记
    function f1(j, w, tit, data) {
        var point = new BMapGL.Point(j, w);
        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);
        var opts = {
            width: 200,
            height: 100,
            title: tit
        };
        var infoWindow = new BMapGL.InfoWindow(data, opts);
        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point);
        });
    }

    f1(myx, myy, "自己的位置", info)
    for (let i = 0; i < xlist.length; i++) {
        f1(xlist[i], ylist[i], namelist[i], infolist[i])
    }
</script>
</html>
